<template>
  <glsx-dialog :show="showPopup" :title="getTitle()" @close="closeDialog()" v-if="showPopup">
    <div class="">
      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-width="120px" size="small">
        <el-form-item label="所属平台：" prop="platform">
          <!-- <el-select v-model="addForm.type">
            <el-option label="首页" value="0"></el-option>
            <el-option label="医院列表" value="1"></el-option>
            <el-option label="医生列表" value="2"></el-option>
          </el-select> -->
          <PlatformSelect v-model="addForm.platform"></PlatformSelect>
        </el-form-item>
        <el-form-item label="页面名称：" prop="type">
          <el-select v-model="addForm.type">
            <el-option label="首页" :value="0"></el-option>
            <el-option label="医院列表" :value="1"></el-option>
            <el-option label="医生列表" :value="2"></el-option>
            <el-option label="商品列表" :value="3"></el-option>
            <el-option label="查价格" :value="4"></el-option>
            <el-option label="查资质" :value="5"></el-option>
            <el-option label="查案例" :value="6"></el-option>
            <el-option label="口腔百科" :value="7"></el-option>
            <el-option label="社区问答" :value="8"></el-option>
            <el-option label="口腔报告" :value="9"></el-option>
            <el-option label="机构入驻" :value="10"></el-option>
            <el-option label="个人中心" :value="11"></el-option>
            <el-option label="关于哩哩" :value="12"></el-option>
            <el-option label="新闻资讯" :value="13"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="seo标题：" prop="title">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <el-form-item label="seo关键词：" prop="keywords">
          <el-input type="textarea" v-model="addForm.keywords" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="seo描述：" prop="description">
          <el-input type="textarea" v-model="addForm.description" rows="5" resize="none"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button type="primary" size="small" :loading="loading" @click="saveInfo">确定</el-button>
      <el-button type="default" size="small" @click="closeDialog()">取消</el-button>
    </div>
  </glsx-dialog>
</template>
  <script>
import { deepClone, showToast } from "@/common/util";
import {
  ADD_SEOSETTING_INFO,
  EDIT_SEOSETTING_INFO,
  GET_SEOSETTING_INFO,
} from "@/http/system";
import PlatformSelect from '@/components/select/platform.vue' 
export default {
  name: "AddPopup",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
  },
  watch: {
    value: {
      handler: function (n) {
        this.showPopup = n;
      },
      immediate: true,
    },
    id: {
      handler: function (n) {
        if (n) {
          this.getInfo(n);
        }
      },
      immediate: true,
    },
  },
  components:{
    PlatformSelect
  },
  data() {
    return {
      showPopup: false,
      addForm: {},
      addFormRules: {
        platform:[{ required: true, message: "请选择所属平台", trigger: "change" }],
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
        title: [{ required: true, message: "请输入seo标题", trigger: "blur" }],
        keywords: [
          { required: true, message: "请输入seo关键词", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入seo描述", trigger: "blur" },
        ],
      },
      loading: false,
    };
  },
  methods: {
    // 关闭弹框
    closeDialog() {
      this.$emit("input", false);
      this.addForm = {};
    },

    // 动态获取标题
    getTitle() {
      let title = this.id ? "编辑" : "新增";
      title += "seo";
      return title;
    },

    // 获取详情
    getInfo(id) {
      let _this = this;
      let callBack = GET_SEOSETTING_INFO;
      let oParams = {};
      oParams.id = id;
      callBack(oParams).then((res) => {
        let obj = res.data || {};
        let o = {};
        o.type = obj.type;
        o.id = obj.id;
        o.title = obj.title;
        o.keywords = obj.keywords;
        o.description = obj.description;
        o.platform = obj.platform
        _this.addForm = o;
      });
    },

    // 参数处理
    getParams() {
      let o = deepClone(this.addForm);
      return o;
    },

    // 保存数据
    saveInfo() {
      let _this = this;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = deepClone(this.addForm);
        let callBack = ADD_SEOSETTING_INFO;
        let msg = "新增成功";

        // 编辑
        if (_this.id) {
          oParams.id = _this.id;
          callBack = EDIT_SEOSETTING_INFO;
          msg = "编辑成功";
        }

        callBack(oParams).then((res) => {
          if (res.code == 200) {
            showToast({
              message: msg,
              type: "success",
            });
            _this.closeDialog();
            _this.$emit("change");
          }
        });
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
</style>